<template>
	<div class="loginWrap">
		<div class="login">
			<div class="header cf">
				<img src="@/assets/hmm/1.png" />
			</div>
			<div class="loginContentWrap">
				<div class="loginContent">
					<div class="telPhoneWrap">
						<div class="title">统一登录平台</div>
						<!-- @tab-click="handleClick" -->
						<el-tabs v-model="state.active" class="tabs">
							<el-tab-pane label="账号登录" name="1"></el-tab-pane>
							<!-- <el-tab-pane label="扫码登录" name="2"></el-tab-pane> -->
						</el-tabs>
						<div class="content" v-show="state.active == 1">
							<el-form
								ref="ruleFormRef"
								:model="ruleForm"
								status-icon
								:hide-required-asterisk="false"
								:rules="rules"
								class="demo-ruleForm"
								@keyup.enter="submitForm(ruleFormRef)"
							>
								<el-form-item prop="name">
									<el-input v-model="ruleForm.name" placeholder="请输入账号" />
								</el-form-item>
								<el-form-item prop="pass">
									<el-input v-model="ruleForm.pass" type="password" placeholder="请输入密码" show-password />
								</el-form-item>
								<el-form-item prop="captcha" class="login-captcha">
									<el-input v-model="ruleForm.captcha" placeholder="验证码"></el-input>
									<img :src="state.captchaBase64" @click="onCaptcha" />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<span>版权归杭州美联数字医疗科技有限公司所有浙ICP备 17034765号-4 浙公网安备 33010802011423号</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { useCaptchaApi } from '@/api/auth'
import { login } from '@/api/auth-hm'
import store from '@/store'
const route = useRoute()
const router = useRouter()
const state = reactive({
	active: '1',
	captchaBase64: ''
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	name: '',
	pass: '',
	captcha: '',
	key: ''
})
const rules = reactive<FormRules<RuleForm>>({
	name: [
		{ required: true, message: '请输入账号', trigger: 'blur' }
		// { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	],
	pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
onMounted(() => {
	document.title = '统一登录平台'
	onCaptcha()
})
const onCaptcha = async () => {
	const { data } = await useCaptchaApi()
	ruleForm.key = data.key
	state.captchaBase64 = data.image
}
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			let loginForm = {
				username: ruleForm.name,
				password: ruleForm.pass,
				key: ruleForm.key,
				captcha: ruleForm.captcha
			}
			ruleForm.captcha = ''
			onCaptcha()
			// const loading = ElLoading.service({
			// 	lock: true,
			// 	text: 'Loading',
			// 	background: 'rgba(0, 0, 0, 0.7)'
			// })
			login(loginForm).then(
				res => {
					// loading.close()
					if (res.code == 0) {
						// 登录成功 获取信息放缓存
						ElMessage({
							message: '登录成功',
							type: 'success'
						})
						sessionStorage.setItem('loginState', res.data.flag)
						sessionStorage.setItem('token', res.data.access_token)
						store.userStore.accountLoginActionTwo()
						if (res.data.flag == true) {
							router.push({
								path: '/userInfo'
							})
						} else {
							router.push({
								path: '/gateway'
							})
						}
					} else {
						ElMessage.error(res.msg)
					}
				},
				error => {
					// loading.close()
				}
			)
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>

<style lang="scss" scoped>
.loginWrap {
	background: linear-gradient(to right, #e1ecf7, #e7f3ff);
	height: 100%;
	.login {
		height: 100%;
		background: url('../../assets/hmm/bgCompany.png') no-repeat center;
		background-size: cover;
		background-position: center;
		.header {
			margin: 0px auto;
			position: relative;
			position: absolute;
			top: 40px;
			left: 60px;
			img {
				display: block;
				height: 32px;
			}
		}
		.loginContentWrap {
			height: 100%;
			position: relative;
			.loginContent {
				width: 450px;
				background: #fff;
				margin: 0 auto;
				font-size: 0;
				position: absolute;
				top: calc(50% + 30px);
				right: 13%;
				transform: translateY(-50%);
				border-radius: 8px;
				.telPhoneWrap {
					vertical-align: top;
					font-size: 24px;
					color: #6a6a6a;
					padding: 64px;
					position: relative;
					.title {
						color: #1d2129;
						font-weight: 700;
						font-size: 24px;
						margin-bottom: 15px;
					}
					::v-deep(.tabs .el-tabs__nav) {
						width: 100%;
						.el-tabs__active-bar {
							background: #409eff;
						}
						.el-tabs__item {
							font-size: 18px;
							height: 40px;
							line-height: 40px;
							text-align: center;
							&.is-active,
							&:hover {
								font-weight: 700;
								color: #409eff;
							}
						}
					}
					::v-deep(.el-tabs__nav-wrap::after) {
						height: 0;
					}
				}
			}
			.content {
				margin-top: 35px;
				.demo-ruleForm {
					::v-deep(.el-form-item) {
						position: relative;
						padding-bottom: 10px;
						&.login-captcha {
							position: relative;
							.el-form-item__content {
								.el-input {
									width: 160px;
								}
							}
							img {
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								right: 0;
								width: 130px;
								cursor: pointer;
							}
						}
						.el-form-item__content {
							.el-input__wrapper {
								padding: 5px 11px;
								.el-input__suffix {
									.el-input__validateIcon {
										display: none;
									}
								}
							}
							.el-form-item__error {
								padding: 6px 0 4px;
							}
							.el-button--primary {
								background: #409eff;
								border-color: #409eff;
								color: #fff;
								font-size: 16px;
								width: 100%;
								height: 40px;
								line-height: 40px;
							}
						}
						.eye {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: 25px;
							width: 20px;
							height: 20px;
							padding: 10px 5px 10px 15px;
						}
						&.btn {
							margin-top: 40px;
							.el-button {
								width: 100%;
							}
						}
					}
				}
			}
		}
		.footer {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			width: 1200px;
			text-align: center;
			font-size: 14px;
			color: #4e5969;
		}
	}
}

// @media only screen and (max-width: 992px) {
// 	.login-intro {
// 		display: none;
// 	}
// }
// @media only screen and (max-width: 768px) {
// 	.login-container {
// 		background: #fff;
// 	}
// 	.login-intro {
// 		display: none;
// 	}
// 	.login-form {
// 		flex: 0 1 auto;
// 		border-radius: 0;
// 		box-shadow: none;
// 	}
// 	.login-captcha {
// 		:deep(.el-input) {
// 			width: 150px;
// 		}
// 	}
// }
</style>
